<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        table {
            width: 500px;
            margin: 100px auto;
            text-align: center;
        }
        
        thead tr {
            font-size: 18px;
            font-weight: 200;
            background-color: aqua;
        }
        
        tbody tr {
            font-size: 14px;
            background-color: bisque;
        }
    </style>
</head>

<body>
    <table>
        <thead>
            <tr>
                <td>
                    <input type="checkbox" id="js">
                </td>
                <td>商品</td>
                <td>价钱</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    <input type="checkbox">
                </td>
                <td>IPhone8</td>
                <td>8000</td>

            </tr>
            <tr>
                <td>
                    <input type="checkbox">
                </td>
                <td>iPad Pro</td>
                <td>5000</td>

            </tr>
            <tr>
                <td>
                    <input type="checkbox">
                </td>
                <td>iPad Air</td>
                <td>2000</td>

            </tr>
            <tr>
                <td>
                    <input type="checkbox">
                </td>
                <td>Apple Watch</td>
                <td>2000</td>

            </tr>
        </tbody>
    </table>
    <script>
        //  1.全选和取消全选做法，让下面所有的复选框的checked属性跟随全选按钮
        //  获取元素
        var js = document.querySelector('#js'); //全选按钮
        var input = document.querySelector('tbody').querySelectorAll('input'); //单个按钮
        // 注册事件
        js.onclick = function() {
                // this.checked 它可以得到当前复选框的选中状态，如果是true，就是选中，如果是false，就是未选中
                console.log(this.checked);
                for (var i = 0; i < input.length; i++) {
                    input[i].checked = this.checked;
                }
            }
            // 2.下面复选框需要全部选中，上面全选才能选中：
            // 给下面所有复选框绑定事件，每次点击都要循环查看下面所有的复选框是否有 没有被选中的，如果有一个没被选中则上面的全选就不选中
            // 可以设置一个变量
        for (var i = 0; i < input.length; i++) { //给每个小按钮绑定事件
            input[i].onclick = function() {
                var flag = true; // 第一次点击为true
                // 检查四个小按钮是否都被选中
                for (var i = 0; i < input.length; i++) {
                    if (!input[i].checked) { //按钮没有被选中
                        flag = false;
                    }
                }
                js.checked = flag; //给全选按钮赋值
            }
        }
    </script>

</body>

</html>